<template>
  <div>
    <el-dialog v-model="openSelDialog"
               :before-close="handleClose"
               title="选择商品"
               draggable
               width="1000px"
               append-to-body
    >

      <el-form :inline="true" :model="queryParams" label-width="80px" >
        <div style="display: flex;flex-wrap: wrap">
          <el-col :span="8">
            <el-form-item label="SKU编码">
              <el-input v-model="queryParams.skuCode" placeholder="SKU编码" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品名称">
              <el-input v-model="queryParams.skuName" placeholder="商品名称" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item >
              <el-button icon="Search" type="primary" @click="getList">查询</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </div>
      </el-form>

      <vxe-table
          ref="tableRef"
          border
          style="margin-top: 10px;"
          align="center"
          :data="tableList"
          height="300"
          :checkbox-config="{ trigger:'row'}"
          :row-config="{isCurrent: true, isHover: true}"
      >
        <vxe-column type="checkbox" width="60" ></vxe-column>
        <vxe-column type="seq" width="60" title="序号"  ></vxe-column>
        <vxe-column field="skuCode" width="200" title="SKU编号"></vxe-column>
        <vxe-column field="skuName" width="220" title="商品名称"></vxe-column>
        <vxe-column field="coverUrl" width="180" title="商品图片">
          <template #default="{row}">
            <ImagePreview v-if="row.coverUrl" :width="150" :height="50" :src="row.coverUrl" ></ImagePreview>
          </template>
        </vxe-column>
        <vxe-column field="skuType" width="120" title="商品分类"></vxe-column>
        <vxe-column field="skuAttr" width="100" title="属性"></vxe-column>
        <vxe-column field="brand" width="100" title="品牌"></vxe-column>
        <vxe-column field="barcode" width="100" title="条码"></vxe-column>
      </vxe-table>
      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="clickSave"> 确定 </el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
      </template>

    </el-dialog>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import {getB2bPurchaseHeaderAddSkuList} from "@/api/scApi";
import ImagePreview from "@/components/ImagePreview/index.vue";

const { proxy } = getCurrentInstance()
const props = defineProps({
  openSelDialog: {
    type: Boolean,
    default: false
  },
  companyId:{type:String},
  warehouseId:{type:String},
  filterData:{type:Array}//已选择的数据
})
let total=ref(0)
let queryParams=ref({
  code:'',
  name:'',
  pageNum: 1,
  pageSize: 10,
})
let tableList =ref([])
const emits = defineEmits(['closeSelDialog'])

function handleClose() {
  emits('closeSelDialog')
}

function getList(){
  queryParams.value.companyId =props.companyId
  queryParams.value.warehouseId =props.warehouseId
  let params={
    "pageNum": queryParams.value.pageNum,
    "pageSize": queryParams.value.pageSize,
    "param":queryParams.value
  }
  getB2bPurchaseHeaderAddSkuList(params).then(res=>{
    if(res.code===200){
      total.value=res.total
      let a = res.data
      let b = props.filterData
      //过滤已经选择的数据
      if(b){
        let filtered = a.filter(obj => !b.some(bObj => bObj.skuId === obj.skuId));
        tableList.value = filtered
      }else{
        tableList.value =a
      }
    }
  })

}
function resetQuery() {
  queryParams.value={
    code:'',
    name:'',
    pageNum: 1,
    pageSize: 10,
  }
  getList()
}

onMounted(()=>{
  getList()
})

function clickSave(){
  const $table = proxy.$refs.tableRef
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    emits('closeSelDialog',selectRecords)
  }
}

</script>

<style scoped lang="scss">

</style>